<template>

  <!--  用户详情  -->
  <div>

<!--    <el-page-header @back="goBack" title="人事" content="用户详情" ></el-page-header>-->

    <el-button size="medium" type="primary" plain @click="goBack" >返回</el-button>

    <!--  分割线  -->
    <el-divider class="head"></el-divider>

    <div class="div-main">
      <el-row>
        <el-col :span="1.5">
          <div>
            <el-divider class="heads"  direction="vertical"></el-divider>
            <b>基本资料:</b>  </div>
        </el-col>
      </el-row>
      <div style="height: 18px"></div>
      <!--  基本资料 表格渲染   -->
      <div class="tableDiv" :model="AdmAddresslistByidData">
        <el-row>
          <el-col :span="8">
            <div class="grid-content">
              <div>
                <span>姓名:</span><br/>
                {{ AdmAddresslistByidData.addresslistName }}
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content">
              <div>
                <span>手机:</span><br/>{{ AdmAddresslistByidData.addresslistCellphonenumber }}
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content">
              <div><span>性别:</span><br/>{{ AdmAddresslistByidData.addresslistSex }}</div>
            </div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <div class="grid-content">
              <div>
                <span>固话:</span><br/>
                {{ AdmAddresslistByidData.addresslistTelephone }}
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content">
              <div>
                <span>是否在职:</span><br/>{{ AdmAddresslistByidData.addresslistState }}
              </div>
            </div>
          </el-col>
        </el-row>
      </div>

      <!--   详细资料     -->

      <div style="height: 40px"></div>

      <el-row>
        <el-col :span="1.5">
          <div>
            <el-divider class="heads"  direction="vertical"></el-divider>
            <b>详细资料:</b>  </div>
        </el-col>
      </el-row>
      <div style="height: 18px"></div>
      <!--  详细资料 表格渲染   -->
      <div class="tableDiv" :model="AdmAddresslistByidData">
        <el-row>
          <el-col :span="8">
            <div class="grid-content">
              <div>
                <span>QQ:</span><br/>
                {{ AdmAddresslistByidData.addresslistQq }}
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content">
              <div>
                <span>邮箱:</span><br/>{{ AdmAddresslistByidData.addresslistPostbox }}
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content">
              <div><span>照片:</span><br/><el-button type="text" size="small" @click="QueryImg">查看</el-button></div>
            </div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <div class="grid-content">
              <div>
                <span>职务:</span><br/>
                {{ AdmAddresslistByidData.addresslistDuty }}
              </div>
            </div>
          </el-col>

          <el-col :span="8">
            <div class="grid-content">
              <div>
                <span>传真:</span><br/>
                {{ AdmAddresslistByidData.addresslistFax }}
              </div>
            </div>
          </el-col>

          <el-col :span="8">
            <div class="grid-content">
              <div>
                <span></span><br/>

              </div>
            </div>

          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <div class="grid-content">
              <div>
                <span>家庭住址:</span><br/>
                {{ AdmAddresslistByidData.addresslistFamily }}
              </div>
            </div>
          </el-col>

        </el-row>

        <el-row>
          <el-col :span="24">
            <div class="grid-content">
              <div>
                <span>备注说明:</span><br/>
                {{ AdmAddresslistByidData.addresslistComment }}
              </div>
            </div>
          </el-col>

        </el-row>

      </div>

    </div>


    <!--  查看文件对话框  -->
    <el-dialog
        title="查看文件"
        :visible.sync="getImgDia"
        width="30%">

      <div class="block">
        <!--      <span class="demonstration">文件:</span>-->
        <el-image :src="AdmAddresslistByidData.addresslistImg"  :preview-src-list="imgSrcs" @click="datu">
          <div slot="error" class="image-slot">
            <!--          <i class="el-icon-picture-outline"></i>-->
            <div class="imgjiazai">图片加载失败...</div>
          </div>
        </el-image>
      </div>
    </el-dialog>



  </div>


</template>

<script>
export default {
  name: "QueryAdmAddresslistByid",
  data(){
    return{
      imgSrcs:[], // 大图预览
      getImgDia:false,// 查看图片对话框
      id:this.$route.params.id, // 传入的ID
      AdmAddresslistByidData:{}, // 查询的数据
    }
  },
  created() {
    this.QueryAdmAddresslistByid()
  },
  methods:{
    goBack(){this.$router.go(-1);}, //返回上一个页面
    QueryAdmAddresslistByid(){

      const loading = this.$loading({
        lock: true,
        text: '正在载入...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });


      this.$http.get(`admAddresslist/${this.id}`)
          .then(res => {

            setTimeout(() => {
              loading.close();
            });

            this.AdmAddresslistByidData=res.data.data
            this.AdmAddresslistByidData.addresslistState = this.AdmAddresslistByidData.addresslistState=="正常"?"在职":"不在职"
          })
          .catch()
    },
    QueryImg(){ // 查看照片
      this.imgSrcs.push(this.AdmAddresslistByidData.addresslistImg)
      this.getImgDia = true
    },
    datu(){
      this.getImgDia=false
    },
  }
}
</script>

<style scoped>

.head{
  margin-top: 10px ;
  margin-bottom: 15px ;
  height: 2px;
}

.heads{
  width: 3px;
  background-color: #409EFF;
  height: 19px;
}

.grid-content {
  min-height: 80px;
  border: 1px solid gainsboro;
}

.grid-content > div {
  margin: 15px 0 0 10px;

}

.grid-content > div > span {
  color: #767676;

}

.div-main{
  margin-left: 10%;
  margin-right: 10%;
  width: 80%;
}

</style>